<template>
    <div class="outDiv">
        <div class="left">
            <span style="text-align: left;">Vue</span>
            <span style="text-align: center;">BackOffice</span>
            <span style="text-align: right;">Arco</span>
        </div>
        <div class="right">
            <span style="margin-top: -5%;" class="Title">欢迎使用</span>
            <span class="Title">请登录</span>
            <form>
                <table>
                    <tbody>
                        <tr>
                            <td>账号:</td>
                            <td><input type="text" placeholder="请输入用户名" v-model="uAccount"></td>
                        </tr>
                        <tr>
                            <td>密码:</td>
                            <td><input type="password" v-model="uPassword" @keydown.enter="btnLogin"></td>
                        </tr>
                        <tr>
                            <td><input type="button" value="登录" @click="btnLogin"></td>
                            <td>
                                <span class="register">还没有账号 去<a href="#" @click="btnRegister">注册</a></span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
let uAccount = ref('')
let uPassword = ref('')
let router = useRouter()
function btnLogin() {
    if (uAccount.value !== '' && uPassword.value !== '') {
        let account = uAccount.value
        let password = uPassword.value
        fetch(`http://localhost:7070/user?account=${account}&&password=${password}`).then(res => {
            if (res.status == 200) {
                alert('欢迎光临')
                localStorage.setItem('user', account)
                localStorage.setItem('color','#7179e2')
                router.push('/backoffice')
            } else {
                alert('账号或密码错误');
            }
        })
    } else {
        if (uAccount.value === '') {
            alert('请输入账号')
        } else if (uPassword.value === '') {
            alert('请输入密码')
        }
    }
}

function btnRegister() {
    router.push('/register')
}
</script>
<style scoped>
.outDiv {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    background-image: linear-gradient(270deg, #8146b4, #6990f6);
    align-items: center;
}

.left {
    display: flex;
    flex-direction: column;

    justify-content: center;


    width: 60%;
    height: 80%;
    color: #ffffff;
}

.right {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    width: 25%;
    margin-left: 3%;
    height: 35%;
    border: 2px solid #ffffff;

    border-radius: 10px;
}

.left span {
    font-size: 115px;
    font-family: fantasy;
    font-style: italic;
    text-shadow: 2px 2px red;
}

.right .Title {
    font-size: 50px;
    font-style: italic;
    font-family: cursive;
    color: #ffffff;
    text-shadow: 2px 2px red;

}

table {
    border: 2px solid #ffffff;
    color: #ffffff;
    box-shadow: 2px 2px #ef00ff85;

    font-family: cursive;

    margin-top: 10%;

    line-height: 25px;
}

table input {
    background-color: #000c1700;
    color: #ffffff;
    outline: none;
    border: none;
    border-bottom: 2px solid #ffffff;
}

table input[type=button] {
    font-size: 15px;
    font-family: cursive;
    font-weight: 900;
    color: #ffffff;
}

a {
    font-size: 20px;
    color: red;
    text-decoration-color: #ffffff;
}
</style>